<template>
    <div class="container" :class="{ hideSideBarClass: isCollpaseRef }">
        <div class='button' style="height: 50px;background: green;">
                <ElButton @click="toggleCollapse">toggle</ElButton>
            </div>
        <div class="left">
            <Logo 
            :a-height="50" 
            :a-is-collapse="isCollpaseRef"
            :a-expand-width="widthRef"
            :a-collapse-width="collapseWidth"
            :a-transition-duration="transitionDurationMs"
            >
        </Logo>
            <div style="height: calc( 100% - 50px );">
                <MyMenu
                    :a-my-menu-item-array="menuItemArrayRefCal"
                    a-base-path="/menuTestView"
                    :a-is-collapse="isCollpaseRef"
                    :a-expend-width="widthRef"
                    :a-menu-bg-color="cssGlobalVariableMap.get(TypeCssGlobalVariableEnum.MENU_BG)"
                    a-menu-collapse-duration="1.5s"
                ></MyMenu>
            </div>

            <ElButton @click="toggle">toggle</ElButton>
        </div>

        <div class="main">
            <RouterView></RouterView>
        </div>
        </div>
</template>
<script setup lang='ts'>
import Logo from '@/components/logo/logo2.vue';
import MyMenu from '@/components/menu/my_menu_index.vue';
import {ref } from "vue";
import { menuTestRoutes } from "@/components/menu/demo/menu_test_routes";
import { cssGlobalVariableMap} from "@/utils/NslUtil4Css";
import { TypeCssGlobalVariableEnum } from "@/utils/util_type";
import { TypeMyMenuItem } from '@/components/menu/my_menu_type';
import { buildMenuItemArray } from '@/components/menu/my_menu_until';
import { NslUtils } from '@/utils/NslUtil';
    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
const isCollpaseRef = ref(false);
const widthRef = ref(300);
let menuItemArray: TypeMyMenuItem[] = [];

menuItemArray=buildMenuItemArray(menuTestRoutes[0].children);
menuItemArray=menuItemArray.concat(menuItemArray,menuItemArray,menuItemArray,menuItemArray);

console.log((cssGlobalVariableMap.get(TypeCssGlobalVariableEnum.SIDE_BAR_COLLAPSE_WIDTH_PX)));

let collapseWidth=NslUtils.toInt(cssGlobalVariableMap.get(TypeCssGlobalVariableEnum.SIDE_BAR_COLLAPSE_WIDTH_PX));
const transitionDurationMs=cssGlobalVariableMap.get(TypeCssGlobalVariableEnum.SIDE_BAR_COLLAPSE_TRANSITION_DURATION_MS);


console.log('collapseWidth',collapseWidth);
console.log('transitionDurationMs',transitionDurationMs);

const menuItemArrayRefCal = ref(menuItemArray);
function toggleCollapse(){
    isCollpaseRef.value=!isCollpaseRef.value;
}  
const toggle = () => {
isCollpaseRef.value = !isCollpaseRef.value;
if (isCollpaseRef.value) {
    widthRef.value = 64;
} else {
    widthRef.value = 300;
}
}; 
</script>
<style lang='scss' scoped>
    
</style>